<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- js事件引入:把事件在行内进行引入 -->
    <div class="box" onclick="alert('点击了')" onmouseover="show(event)">
        今天真阴,天气真好
    </div>
    <div class="box1">
        明天答辩,不开心
    </div>
</body>
<script>
    function show(ele){
        console.log('12345,上山打老虎'+ele.innerText);
    }

    var box=document.getElementsByClassName('box')[0];
    var box1=document.getElementsByClassName('box1')[0];
    //通过onclick属性绑定事件,事件会被覆盖
    box.onclick=function(e){
        console.log('点击了哈哈');
    }

    //添加事件,两个事件可同时进行
    box1.addEventListener('click',function(e){
        console.log('答辩or');
    })
    box1.addEventListener('click',function(e){
        console.log('不答辩');
    })

    //自定义函数
    addMyEvent(box1,'click',function(e){
        console.log('事件');
    })
    //可以解决浏览器兼容问题
    function addMyEvent(e,type,hanshu){
        //标准浏览器方法
        if (e.addEventListener) {
            console.log(1);
            e.addEventListener(type,hanshu);
        }
        //IE浏览器对象
        else if (e.addachEvent) {
            console.log(2);
            e.addEventListener(type,hanshu);
        }
        //剩余浏览器的方法
        else{
            console.log(3);
            e.addEventListener(type,hanshu);
        }
    }
    
</script>
</html>